<template>
	<div>
		<h1>待办事项列表</h1>
		<!-- 3.使用组件  -->
		<!-- 自定义事件addItem 事件绑定 -->
		<todo-add @addItem="addItem"></todo-add>
		<van-divider />
		<!-- 自定义属性itemList 属性绑定 -->
		<todo-list :itemList="items" :delItem="delItem"></todo-list>
	</div>
</template>

<script>
import TodoAdd from './components/TodoAdd.vue'; //1.导入组件文件
import TodoList from './components/TodoList.vue';
export default {
	name:"Todo",
	components: {
		TodoList, //2.组测组件，驼峰格式自动转短划线格式todo-list
		TodoAdd
	},
	data() {
		return {
			items: ['上课', '吃饭', '睡觉', '打凉凉1', '打凉凉2']
		};
	},
	
	provide () {    //父组件中通过provide来提供属性变量，在子组件中通过inject来注入。
	  return {
	    delItem: this.delItem
	  }
	},
	
	methods: {
		addItem(item) {
			this.items.push(item);
		},

		delItem(i) {
			this.items.splice(i, 1);
		}
	}
};
</script>
